import React, {useEffect, useRef, useState} from "react";
import {Row, Col, PageHeader, Card, Button, Popconfirm, message, Modal, AutoComplete, InputRef, Input} from 'antd'
import {QuestionCircleOutlined} from '@ant-design/icons';
import {queryUserGroup, addUserGroup,deleteUserGroup} from '../../services/group'
import './index.css'
import {GroupData} from "../../types/group";

const {Meta} = Card;

const Group: React.FC = (props, context) => {

    const [groupList, setGroupList] = useState<Array<GroupData>>([]);
    const [inputValue, setInputValue] = useState<String>("");
    const [deleteName, setDeleteName] = useState<String>("");
    const [options, setOptions] = useState<{ value: string }[]>([]);
    const inputAdd = useRef<InputRef>();

    const addGroup = (group:String) => {
        addUserGroup({"userGroup":group}).then(data => {
            console.log(data)
            groupList.push({
                groupName:group,
                desc:"-创造移动的家--创造幸福的家"
            })
            message.success('添加成功');
        }).catch(err => {
            console.log(err)
            message.error('添加失败')
        })
    }

    function onFocusGroup(name:String) {
        setDeleteName(name)
    }

    function deleteGroup(){
        if(deleteName == 'one'){
            message.warning('这个就别删了吧～')
        }
        deleteUserGroup({"userGroup":deleteName}).then(data => {
            console.log(data)
            message.success('删除成功');
            groupList.forEach((item, i) => {
                if (item.groupName == deleteName) {
                    groupList.splice(i, 1)
                }
            })
        }).catch(err => {
            console.log(err)
            message.error('删除失败')
        })
    }

    useEffect(() => {
        queryUserGroup().then(res => {
            // console.log(res)
            // @ts-ignore
            setGroupList(res)
        }).catch(err => {
            console.log(err)
        })
    },[groupList])


    // 对话框
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    function handleOk(){
        setIsModalVisible(false);
        // console.log(inputAdd.current)
        console.log(inputValue)
        addGroup(inputValue)
    }

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const onSearch = (searchText: string) => {
        setOptions(
            !searchText ? [] : [{value:"one"},{value:"two"},{value:"three"},{value:"four"},],
        );
    };

    const onSelect = (data: string) => {
        console.log('onSelect', data);
        setInputValue(data)
    };

    // const onChange = (data: string) => {
    //     setValue(data);
    // };

    function inputOnChange(e: any) {
        console.log(e.target.value)
        setInputValue(e.target.value)
    }

    return <>
        <div>
            <PageHeader
                className="site-page-header"
                title="单元信息管理"
            />
            <div className="context">
                <Row gutter={100}>
                    {
                        groupList.map((value, index, array) => {
                            return (
                                <Col key={index} style={{marginBottom: '16px'}} span={4} offset={1}>
                                    <Card
                                        hoverable
                                        style={{width: 250, padding: '20px 50px', textAlign: 'center'}}
                                        cover={<img alt="example" src="/room.png"/>}
                                    >
                                        <Popconfirm onConfirm={deleteGroup} title="Are you sure？"
                                                    icon={<QuestionCircleOutlined style={{color: 'red'}}/>}>
                                            <Button type="dashed" onClick={() => onFocusGroup(value.groupName)} ghost>
                                                删除
                                            </Button>
                                        </Popconfirm>
                                        <Meta style={{textAlign: 'center'}} title={value.groupName}
                                              description={value.desc}/>
                                    </Card>
                                </Col>)
                        })
                    }
                    <Col style={{marginBottom:'16px'}} span={4} offset={1}>
                        <Card
                            hoverable
                            style={{ width: 250,padding:'20px 50px',height:'340px'}}
                            cover={<img alt="example" src="/plus.png" />}
                            onClick={showModal}
                        >
                            <Meta style={{textAlign:'center'}} title="点击添加" description="建一个新的分组" />
                        </Card>
                    </Col>
                </Row>
                <Modal title="添加分组" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <AutoComplete
                        options={options}
                        style={{ width: 200 }}
                        onSelect={onSelect}
                        onSearch={onSearch}
                        placeholder="请输入新添加的组名"
                        children={<Input onChange={inputOnChange} />}
                    />
                </Modal>

            </div>
        </div>
    </>
}

export default Group;